<template>
	<view class="all">
		<!-- <view style="display: flex;justify-content: space-between;width: 750upx;background: #FFFFFF;">
			<view @click="xuan_tap(1)" :class="key == 1?'titles':'titless'"> 商城订单 </view>
			<view @click="xuan_tap(2)"  :class="key == 2?'titles':'titless'"> 积分商城订单 </view>
		</view> -->
		<view class="list_top" style="display: flex;justify-content: space-around;">
				<view @click="list_top_tap_new(0)" :class="status == 0?'list_top_boxa':'list_top_box_newa'"> <text class="list_top_box_text">全部</text> </view>
				<!-- <view @click="list_top_tap_new(1)" :class="status == 1?'list_top_boxa':'list_top_box_newa'"> <text class="list_top_box_text">未支付</text> </view> -->
				<view @click="list_top_tap_new(2)" :class="status == 2?'list_top_boxa':'list_top_box_newa'"> <text class="list_top_box_text">待服务</text> </view>
				<view @click="list_top_tap_new(3)" :class="status == 3?'list_top_boxa':'list_top_box_newa'"> <text class="list_top_box_text">已服务</text> </view>
				<view @click="list_top_tap_new(4)" :class="status == 4?'list_top_boxa':'list_top_box_newa'"> <text class="list_top_box_text">退款/售后</text> </view>
				<view @click="list_top_tap_new(5)" :class="status == 5?'list_top_boxa':'list_top_box_newa'"> <text class="list_top_box_text">已退款</text> </view>
		</view>
		<view class="list">
			<view v-if="data_list != 0" class="list_box" v-for="(item,index) in data_list" :key="index" style="margin-top: 20upx;" @click="detail_new(item.order_id)">
				<view class="list_box_top">
					<view class="list_box_top_text">预约时间：{{item.time}}</view>
					<!-- <view class="list_box_top_text" v-if="item.status == 0">未付款</view> -->
					<view class="list_box_top_text" v-if="item.status == 1">待服务</view>
					<view class="list_box_top_text" v-if="item.status == 2">已服务</view>
					<view class="list_box_top_text" v-if="item.status == 3">退款/售后</view>
				</view>
				<view class="list_box_box">
					<image :src="item.image" mode="aspectFill" class="list_box_box_image" @click="goods_id_tap(item)"></image>
					<view class="list_box_box_text">
						<view class="list_box_box_texts">{{item.name}}</view>
						<view class="list_box_box_textss">¥{{item.money}}</view>
						<view class="list_box_box_textss">数量：{{item.number}}</view>
						<view class="list_box_box_textsss" v-if="item.type == 1">家政服务商品</view>
						<view class="list_box_box_textsss" v-if="item.type == 2">汽车养护商品</view>
						<view class="list_box_box_textsss" v-if="item.type == 3">奢品养护商品</view>
					</view>
				</view>
				<view class="list_box_bottom" style="display: flex;justify-content:flex-end;">
					<!-- <view class="list_box_bottom_box" v-if="item.status == 0" @click="zhifula(item.order_id,item.type)">去支付</view> -->
					<view class="list_box_bottom_box" style="margin-left: 10upx;"  v-if="item.status == 2" @click.stop="user_order_sure_api(item.order_id)">确认完成</view>
					<!-- <view class="list_box_bottom_box" style="margin-left: 10upx;" v-if="item.status == 2" @click.stop="order_logistics_api(item.order_id)">支付尾款</view> -->
					<!-- <view class="list_box_bottom_box" style="margin-left: 10upx;" v-if="item.status == 3" @click.stop="order_logistics_api(item.order_id)">退款/售后</view> -->
					<view style="display: flex;justify-content: flex-end;" v-if="item.status == 3">
						<button open-type="contact" class="list_box_bottom_box" style="margin-left: 10upx;">退款/售后</button>
					</view>
				</view>
			</view>
			<view v-if="data_list == 0" style="width: 100%;font-size: 22upx;text-align: center;line-height: 100upx;">没有更多了呦~</view>
		</view>
		<!-- <uni-section title="输入框示例" type="line" padding>
			<view class="dialog-box">
				<text class="dialog-text">输入内容：{{ value }}</text>
			</view>
			<button class="button" type="primary" @click="inputDialogToggle"><text class="button-text">输入对话框</text></button>
		</uni-section> -->
		<!-- <button @click="open">打开弹窗</button> -->
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close" @confirm="confirm"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data_list:[],
				page:1,
				key:1,
				status:0,
				logistics_list:[],
				order_id:'',
				money:''
			}
		},
		onLoad(num) {
			this.status = num.key
			// this.order_list_api()
		},
		onShow() {
			this.order_list_api()
		},
		methods: {
			confirm(value) {
				// 输入框的值
				console.log(value)
				this.money = value
				// TODO 做一些其他的事情，手动执行 close 才会关闭对话框
				// ...
				// this.$refs.popup.close()
				var that = this
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				that.$request(that.$Api.order_pays_api, {
					access_token:uni.getStorageSync('access_token'),
					order_id:that.order_id,
					money:that.money
				},"POST").then(res => {
					if( res.data.code == 0 ){
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package:  res.data.data.package,
							signType: 'MD5',
							paySign: res.data.data.paySign,
							success: function (res) {
								uni.showToast({
								    title: '支付成功',
								    duration: 2000
								});
								setTimeout(function () {
									that.$refs.popup.close()
									that.order_list_api()
								}, 2000);
							},
							fail: function (err) {
								console.log('err',err)
								uni.showLoading({
									title: '支付失败',
								});
								setTimeout(function () {
									uni.hideLoading();
								}, 1000);
							}
						});
						// that.$refs.popup.close()
						// that.order_list_api()
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			close() {
				var that = this
				// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
				// ...
				that.$request(that.$Api.order_pays_api, {
					access_token:uni.getStorageSync('access_token'),
					order_id:that.order_id,
					money:that.money
				},"POST").then(res => {
					console.log('res.data.data',res.data.data)
					if( res.data.code == 0 ){
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package:  res.data.data.package,
							signType: 'MD5',
							paySign: res.data.data.paySign,
							success: function (res) {
								uni.showToast({
								    title: '支付成功',
								    duration: 2000
								});
								setTimeout(function () {
									that.$refs.popup.close()
									that.order_list_api()
								}, 2000);
							},
							fail: function (err) {
								console.log('err',err)
								uni.showLoading({
									title: '支付失败',
								});
								setTimeout(function () {
									uni.hideLoading();
								}, 1000);
							}
						});
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			open() {
				this.$refs.popup.open()
			},
			// inputDialogToggle() {
			// 	this.$refs.popup.open('top')
			// 	// this.$refs.inputDialog.open()
			// },
			detail_new(order_id) {
				// uni.navigateTo({
				// 	url:'../detail_new/detail_new?order_id='+order_id
				// })
			},
			order_logistics_api(order_id) {
				this.order_id = order_id
				this.$refs.popup.open()
				// uni.navigateTo({
				// 	url:'../logistics/logistics?order_id='+order_id
				// })
			},
			list_top_tap_new(num) {
				var that = this
				that.status = num
				that.page = 1
				that.$request(that.$Api.order_list_api, {
					access_token:uni.getStorageSync('access_token'),
					page:that.page,
					status:that.status,
				},"POST").then(res => {
					if( res.data.code == 0 ){
						that.data_list = res.data.data.list
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			//小程序支付
			zhifula(goods_id) {
				var that = this
				that.$request(that.$Api.order_pay_api, {
					access_token: uni.getStorageSync('access_token'),
					goods_id:goods_id,
				}, "POST").then(res => {
					if (res.data.code == 0) {
						uni.requestPayment({
							provider: 'wxpay',
							timeStamp: res.data.data.timeStamp,
							nonceStr: res.data.data.nonceStr,
							package:  res.data.data.package,
							signType: 'MD5',
							paySign: res.data.data.paySign,
							success: function (res) {
								uni.showToast({
								    title: '支付成功',
								    duration: 2000
								});
								setTimeout(function () {
									that.page = 1
								    that.order_list_api()
								}, 2000);
							},
							fail: function (err) {
								console.log('err',err)
								uni.showLoading({
									title: '支付失败',
								});
								setTimeout(function () {
									uni.hideLoading();
								}, 1000);
							}
						});
					} else {
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			xuan_tap(num) {
				this.key = num
				if( num == 1 ) {
					this.page = 1
					this.user_order_goods_api()
				}else{
					this.page1 = 1
					this.user_order_mall_api()
				}
			},
			//支付
			user_order_goods_pay_api(order_id,type) {
				var that = this
				that.$request(that.$Api.user_order_goods_pay_api, {
					access_token:uni.getStorageSync('access_token'),
					order_id:order_id
				},"POST").then(res => {
					if( res.data.code == 0 ){
						console.log('type',type)
						if( type == 1 ) { //微信
							let obj = {
								appid: res.data.data.appid,
								noncestr: res.data.data.noncestr , 
								package: res.data.data.package,
								partnerid: res.data.data.partnerid,
								prepayid: res.data.data.prepayid,
								timestamp: res.data.data.timestamp,
								sign: res.data.data.sign
							}
							console.log('12321321321321',obj)
							that.requestPayment_tap(obj)
						}else if( type == 2 ) { //支付宝
							that.alipay_api(res.data)
							// uni.showToast({
							// 	title: '暂未开通',
							// 	duration: 2000,
							// 	icon: 'none'
							// });
						}else{ //积分
							uni.showToast({
								title: '支付成功',
								duration: 2000,
								icon:'none'
							});
							if( that.key == 1 ) {
								that.page = 1
								that.user_order_goods_api()
							}else{
								that.page1 = 1
								that.user_order_mall_api()
							}
						}
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			//微信支付
			requestPayment_tap(obj) {
				var that = this
				console.log('obj',obj)
				uni.requestPayment({
				    provider: 'wxpay',
				    orderInfo: obj,
				    success: (e) => {
				       uni.showToast({
				       	title: '支付成功',
				       	duration: 2000,
				       	icon:'none'
				       });
				       setTimeout(function () {
				           that.$refs.popup.close()
				           that.order_list_api()
				       }, 2000);
				    },
				    fail: (e) => {
						console.log('e.errMsg',e)
				        uni.showModal({
				            content: "支付失败 " + e.errMsg,
				            showCancel: false
				        })
				    },
				    complete: (ee) => {
						console.log('ee',ee)
				    }
				})
			},
			//支付宝
			alipay_api(data) {
				uni.requestPayment({
				    provider: 'alipay',
				    orderInfo: data.data.info,
				    success: (e) => {
				        uni.showToast({
				        	title: '支付成功',
				        	duration: 2000,
				        	icon:'none'
				        });
				        setTimeout(function () {
				            uni.navigateBack({
				            	delta:1
				            })
				        }, 2000);
				    },
				    fail: (e) => {
						that.kaitong_a = 0
				        uni.showModal({
				            content: "支付失败 " + e.errMsg,
				            showCancel: false
				        })
				    },
				    complete: () => {
				    }
				})
			},
			user_order_sure_api(order_id) {
				var that = this
				that.$request(that.$Api.order_sure_api, {
					access_token:uni.getStorageSync('access_token'),
					order_id:order_id
				},"POST").then(res => {
					if( res.data.code == 0 ){
						that.page = 1
						that.order_list_api()
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
			//
			order_list_api() {
				var that = this
				that.$request(that.$Api.order_list_api, {
					access_token:uni.getStorageSync('access_token'),
					page:that.page,
					status:that.status,
				},"POST").then(res => {
					if( res.data.code == 0 ){
						that.data_list = res.data.data.list
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon: 'none'
						});
					}
				})
			},
		},
		onReachBottom() {
			var that = this
			that.page++
			that.$request(that.$Api.order_list_api, {
				access_token:uni.getStorageSync('access_token'),
				page:that.page,
				status:that.status,
			},"POST").then(res => {
				if( res.data.code == 0 ){
					if( res.data.data.list.length != 0 ) {
						that.data_list = that.data_list.concat(res.data.data.list)
					}else{
						uni.showToast({
							title: '暂无更多数据',
							duration: 2000,
							icon: 'none'
						});
					}
				}else{
					uni.showToast({
						title: res.data.msg,
						duration: 2000,
						icon: 'none'
					});
				}
			})
		},
		goods_id_tap(item) {
			uni.navigateTo({
				url:'../shop_details/shop_details?goods_id='+item.goods_id
			})
		},
	}
</script>

<style lang="less">
	page{
		.all{
			.list_top{
				width: 750upx;
				display: flex;
				background: #FFFFFF;
				padding-bottom: 28upx;
				.list_top_box{
					width: 150upx;
					margin-top: 30upx;
					text-align: center;
					height: 42upx;
					font-size: 30upx;
					font-weight: bold;
					color: #A02731;
					line-height: 42upx;
					.list_top_box_text{
						padding-bottom: 28upx;
						border-bottom: 1upx solid #A02731;
					}
					.list_top_box_text_aa{
						color: #007AFF;
					}
				}
				.list_top_box_new{
					width: 150upx;
					margin-top: 30upx;
					text-align: center;
					height: 42upx;
					font-size: 30upx;
					font-weight: bold;
					color: #666666;
					line-height: 42upx;
					.list_top_box_text{
						padding-bottom: 28upx;
					}
					.list_top_box_text_aa{
						color: #007AFF;
					}
				}
				.list_top_boxa{
					min-width: 150upx;
					background: #FFFFFF;
					margin-top: 30upx;
					text-align: center;
					height: 42upx;
					font-size: 30upx;
					font-weight: bold;
					color: #A02731;
					line-height: 42upx;
					.list_top_box_text{
						background: #FFFFFF;
						padding-bottom: 28upx;
						border-bottom: 1upx solid #A02731;
					}
				}
				.list_top_box_newa{
					min-width: 150upx;
					background: #FFFFFF;
					margin-top: 30upx;
					text-align: center;
					height: 42upx;
					font-size: 30upx;
					font-weight: bold;
					color: #666666;
					line-height: 42upx;
					.list_top_box_text{
						background: #FFFFFF;
						padding-bottom: 28upx;
					}
					.list_top_box_text_aa{
						color: #007AFF;
					}
				}
			}
			.titles{
				width: 50%;
				text-align: center;
				line-height: 60upx;
				font-size: 26upx;
				color: #fff;
				background: #ff0000;
			}
			.titless{
				width: 50%;
				text-align: center;
				line-height: 60upx;
				font-size: 26upx;
				color: #222;
				background: #FFFFFF;
			}
			.list{
				.list_box{
					.list_box_bottom{
						.list_box_bottom_box{
							width: 140upx;
							height: 50upx;
							background: #EA4E29;
							border-radius: 4upx;
							border: 2upx solid #EA4E29;
							text-align: center;
							line-height: 50upx;
							color: #FFFFFF;
							font-size: 24upx;
						}
						.list_box_bottom_text{
							font-size: 24upx;
							height: 50upx;
							line-height: 50upx;
							color: #333333;
						}
						display: flex;
						justify-content: space-between;
						padding: 20upx 0;
					}
					.list_box_box{
						.list_box_box_text{
							.list_box_box_textsss{
								font-size: 28upx;
								color: #EA4E29;
								margin-top: 10upx;
							}
							.list_box_box_textss{
								font-size: 28upx;
								color: #999999;
								margin-top: 10upx;
							}
							.list_box_box_texts{
								font-size: 28upx;
								color: #333333;
							}
							margin-left: 18upx;
							width: 380upx;
						}
						.list_box_box_image{
							width: 158upx;
							height: 158upx;
						}
						display: flex;
						padding: 16upx 0;
					}
					.list_box_top{
						.list_box_top_text{
							font-size: 24upx;
							color: #333333;
						}
						display: flex;
						justify-content: space-between;
					}
					padding: 24upx;
					background: #FFFFFF;
				}
				padding: 25upx;
			}
		}
		background: #F4F4F4;
	}
</style>
